import React, { useState, useEffect } from 'react';
import { Modal, Table, Timeline, Spin } from 'antd';

import { TRAlert, TRDefault } from '#/components';
import { HttpCode } from '#/utils/contacts';
import TRNotification from '#/utils/notification';
import renovate from '#/utils/renovate';
import { tableLocale } from '@/tool/components/PageEmpty';
import previewIcon from '@/assets/img/preview_icon.png';
import dotBlueIcon from '@/assets/img/dot_bule.png';

import { pointLogShow } from '../../services';
import { COLUMNS, setPoint } from './helper';
import styles from './index.less';

const ConfigComponent = ({ params }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [logData, setLogData] = useState([]);

  useEffect(() => {
    setVisible(true);
    initFetchTimeLog();
  }, []);

  const handleCancel = async () => {
    let obj = { index: 1 };
    if (renovate.isRenovate) {
      obj = await TRAlert.show('当前工作将不被保存，继续执行此操作？');
    }
    if (obj.index === 1) {
      renovate.isRenovate = false;
      setVisible(false);
    }
  };

  const initFetchTimeLog = async () => {
    setIsLoading(true);
    const response = await pointLogShow(params);
    if (response && response.statusCode === HttpCode.SUCCESS) {
      const { dataList } = response;
      let logListData = dataList.map((item) => {
        return {
          ...item,
          dataSource: [
            setPoint('beforeData', item.beforeData),
            setPoint('afterData', item.afterData),
          ],
        };
      });
      setIsLoading(false);
      setLogData(logListData);
    } else {
      setIsLoading(false);
    }
  };

  const titleNode = (
    <span style={{ display: 'flex', alignItems: 'center' }}>
      <img src={previewIcon} width="30" height="30" style={{ marginRight: 10 }} />
      操作日志
    </span>
  );
  return (
    <Modal
      wrapClassName={styles.modalDiv}
      title={titleNode}
      width={580}
      bodyStyle={{ height: 550 }}
      footer={null}
      onCancel={handleCancel}
      visible={visible}
      centered
    >
      <Spin spinning={isLoading} className={styles.spinloading}>
        {logData.length > 0 ? (
          <div className={styles.log_container}>
            <Timeline>
              {logData.map((item, index) => (
                <Timeline.Item key={index} dot={<img src={dotBlueIcon} width={12} height={12} />}>
                  <div className={styles.title}>{item.operationTime.replace(/\\-/g, '.')}</div>
                  <div className={styles.updateUser}>修改人：{item.operationUser}</div>
                  {item.transferRate ? (
                    <div className={styles.updateUser}>{item.transferRate}</div>
                  ) : null}
                  <div style={{ width: 500 }}>
                    <Table
                      columns={COLUMNS}
                      locale={tableLocale}
                      dataSource={item.dataSource}
                      bordered={true}
                      scroll={{ x: 1300 }}
                      pagination={false}
                      className={styles.tableWrap}
                    />
                  </div>
                </Timeline.Item>
              ))}
            </Timeline>
          </div>
        ) : (
          <div className={styles.logContainer}>
            <TRDefault type="emptysm" />
          </div>
        )}
      </Spin>
    </Modal>
  );
};

class ConfigModal {
  __key__ = '';
  show = (params) => {
    return new Promise((resolve) => {
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <ConfigComponent
            params={params}
            onPress={() => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve();
            }}
          />
        ),
        duration: null,
      });
    });
  };
}

export default new ConfigModal();
